<template>
    <div id="app">
        <router-view />
        <van-tabbar v-show="active != -1" v-model="active">
            <van-tabbar-item icon="home-o" to="/">
                首页
            </van-tabbar-item>
            <van-tabbar-item icon="search" to="/cate">
                分类
            </van-tabbar-item>
            <van-tabbar-item icon="friends-o" to="/cart">
                购物车
            </van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="/my">
               个人中心
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0,
        };
    },
    // 监听器
    watch:{
        $route:'processPath'
    },
    // 
    mounted(){
        // 需要获取到当前的路径 并设置正确的导航选中效果
        this.processPath();
    },
    methods:{
        // 处理路径的变化
        processPath(){
            // 获取到当前的路径
            const path = this.$route.path;
            // 
            if(path == '/'){
                this.active = 0;
            }else if(path == '/cate'){
                this.active = 1;
            }else if(path == '/cart'){
                this.active = 2;
            }else if(path == '/my'){
                this.active = 3;
            }else{
                this.active = -1;
            }
            // console.log('检测到路径变化了',this.$route)
        }
    }
};
</script>
<style lang="less">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
